// uno.config.ts
import {defineConfig} from 'unocss'

//默认rem比率  1px = rem(1/16)
const remRatio = 1
const pxType = 'px'

export default defineConfig({
    // 【规则、动态规则RegExp】http://unocss.jiangruyi.com/config/rules
    rules: [
        // 【文字 font】
        [/^fz-(\d+)$/, match => ({'font-size': `${match[1] * remRatio}${pxType}`})],
        [/^fw-(\d+)$/, match => ({'font-weight': `${match[1]}`})],

        // 【颜色可以直接使用RGB/从主题色里面选; 主题色使用查看最下方theme使用说明】
        // 两种使用方法  bg-/bg:   color-/color:
        // 【1】-{变量} (bg-xxx 、 color-xxx)
        // 【2】:{RGB} (bg:#F5F5F5 、 color:#F5F5F5)
        [/^bg-(.*)$/, ([, c], {theme}) => {
            if (theme.colors[c]) return {background: theme.colors[c]}
        }],
        [/^color-(.*)$/, ([, c], {theme}) => {
            if (theme.colors[c]) return {color: theme.colors[c]}
        }],
        [/^bg:(.*)$/, ([, c]) => ({'background': `${c}`})],
        [/^color:(.*)$/, ([, c]) => ({'color': `${c}`})],

        // 【宽高 width/height】
        [/^w-(\d+)$/, match => ({'width': `${match[1] * remRatio}${pxType}`})],
        [/^h-(\d+)$/, match => ({'height': `${match[1] * remRatio}${pxType}`})],
        [/^wb-(\d+)$/, match => ({'width': `${match[1]}%`})],
        [/^hb-(\d+)$/, match => ({'height': `${match[1]}%`})],
        [/^wv-(\d+)$/, match => ({'width': `${match[1]}vw`})],
        [/^hv-(\d+)$/, match => ({'height': `${match[1]}vh`})],

        // 【外边距 margin】
        [/^m-(\d+)$/, ([, d]) => ({'margin': `${d * remRatio}${pxType}`})],
        [/^mt-(\d+)$/, ([, d]) => ({'margin-top': `${d * remRatio}${pxType}`})],
        [/^mr-(\d+)$/, ([, d]) => ({'margin-right': `${d * remRatio}${pxType}`})],
        [/^mb-(\d+)$/, ([, d]) => ({'margin-bottom': `${d * remRatio}${pxType}`})],
        [/^ml-(\d+)$/, ([, d]) => ({'margin-left': `${d * remRatio}${pxType}`})],

        // 【内边距 padding】
        [/^p-(\d+)$/, match => ({'padding': `${match[1] * remRatio}${pxType}`})],
        [/^pt-(\d+)$/, match => ({'padding-top': `${match[1] * remRatio}${pxType}`})],
        [/^pr-(\d+)$/, match => ({'padding-right': `${match[1] * remRatio}${pxType}`})],
        [/^pb-(\d+)$/, match => ({'padding-bottom': `${match[1] * remRatio}${pxType}`})],
        [/^pl-(\d+)$/, match => ({'padding-left': `${match[1] * remRatio}${pxType}`})],

        // 【流布局间隔 gap】
        [/^gap-(\d+)$/, match => ({'gap': `${match[1] * remRatio}${pxType}`})],

    ],
    // 【快捷方式-多个规则组合成单个简写】http://unocss.jiangruyi.com/config/shortcuts
    shortcuts: [
        {
            'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
            'btn-green': 'text-white bg-green-500 hover:bg-green-700',
            'red': 'text-red-100',
        },
        // 动态快捷方式
        [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
    ],

    // 【变体】http://unocss.jiangruyi.com/config/variants
    variants: [
        // 【悬浮 hover】
        // 【举例】 hover:m-10 ， 鼠标悬浮后，获得10px 的 margin边距
        (matcher) => {
            if (!matcher.startsWith('hover:'))
                return matcher
            return {
                // 切片 `hover:` 前缀并传递给下一个变体和规则
                matcher: matcher.slice(6),
                selector: s => `${s}:hover`,
            }
        },

        // 【聚焦 focus】
        // 【举例】 focus:m-10 ， 获得10px 的 margin边距
        (matcher) => {
            if (!matcher.startsWith('focus:'))
                return matcher
            return {
                // 切片 `hover:` 前缀并传递给下一个变体和规则
                matcher: matcher.slice(6),
                selector: s => `${s}:focus`,
            }
        },

        // 【点击 active】
        // 【举例】 active:m-10 ， 获得10px 的 margin边距
        (matcher) => {
            if (!matcher.startsWith('active:'))
                return matcher
            return {
                // 切片 `hover:` 前缀并传递给下一个变体和规则
                matcher: matcher.slice(7),
                selector: s => `${s}:active`,
            }
        },

    ],

    //主题
    theme: {
        colors: {
            //测试： 【使用】 class=  "tx-very-cool" 、 "bg-test1-color"
            'test1Color': '#0000ff',
            'test2': {
                //测试： 【使用】 class= "tx-very-cool" 、 "bg-test2-test3"
                'test3': 'hsl(var(--hue, 217) 78% 51%)',
            },
            //【使用】 class= "tx-red" 、 "bg-red"
            'red': '#FF0000',
            'orange': '#E47833',//...
            'yellow': '#FFFF00',
            'green': '#00FF00',
            'blue': '#0000FF',
            'purple': '#FF00FF',
            'black': '#000000',
            'white': '#FFFFFF',
        },
    }

})